<template>
  <div class="flex flex-col gap-3 px-3 bg-white h-[780px]">
    <div class="p-[2px] rounded-lg bg-gradient-to-r from-[#FFF6FF] to-[#F0F8FF] w-full">
      <div class="rounded-lg bg-[#FBFDFF] w-full h-full">
        <div class="flex flex-row justify-between items-end gap-1 p-4">
          <div class="flex flex-row items-center gap-1 font-bold">
            <div
              class="w-1 h-4 rounded-full bg-gradient-to-b from-[#C778FF] to-[#76A2FF]"
            />
            任务达成情况
          </div>

          <div class="flex flex-row items-center gap-1">
            <div class="flex flex-row items-center mb-[2px] text-[#8C8C8C] text-xs">
              任务评估达成率
              <el-tooltip content="各任务评估维度达成率之和 / 任务评估维度数" trigger="click" placement="top">
                <van-icon name="question-o" color="#BFBFBF" />
              </el-tooltip>
            </div>

            <div
              class="flex flex-row items-center mb-[2px] text-[#8C8C8C] text-xs gap-[2px]"
            >
              <p class="text-[#52C41A]">{{ passRate.toFixed(0) }}%</p>
              <p>|</p>
              <p>达标值</p>
              <p class="text-[#262626]">{{ passSorce }}%</p>
            </div>
          </div>
        </div>
        <div class="w-full p-1">
          <Bar2Chart :data="assessmentData" />
        </div>
      </div>
    </div>

    <div class="p-[2px] rounded-lg bg-gradient-to-r from-[#FFF6FF] to-[#F0F8FF] w-full">
      <div class="rounded-lg bg-[#FBFDFF] w-full h-full">
        <div class="flex flex-row items-end gap-1 p-4">
          <div class="flex flex-row items-center gap-1 font-bold">
            <div
              class="w-1 h-4 rounded-full bg-gradient-to-b from-[#C778FF] to-[#76A2FF]"
            />
            任务达成详情
          </div>

          <div class="flex flex-row items-center gap-1">
            <div class="flex flex-row items-center mb-[2px] text-[#8C8C8C] text-xs">
<!--              点击饼图图例可跳转查看沟通详情-->
            </div>
          </div>
        </div>
        <div class="w-full">
          <CircleChart :data="userReportData" />
        </div>
      </div>

      <AIGeneratedTip class="my-2" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 任务达成
import Bar2Chart from "@/components/charts/bar2Chart.vue";
import CircleChart from "@/components/charts/circleChart.vue";
import AIGeneratedTip from "@/components/AIGeneratedTip.vue";
import {
  getUserAssessment,
  getUserReport,
  ReportDataType,
  UserAssessmentParams
} from "@/services/myXmate";
import { useMyXmateStore } from "@/store";
import { computed, defineProps, nextTick, onMounted, ref, Ref } from "vue";
import { getUserInfo } from "@/utils/auth";

const passSorce = computed(() => store.noticeBoardPublicParam.taskStandardScore);

const passRate = computed(() => {
  return assessmentData.value.reduce((acc, cur) => {
    console.log("reduce : ", cur.value);
    return acc + Number(cur.value);
  } , 0) / assessmentData.value.length;
});

const props = defineProps({
  userId: {
    type: String,
    default: "",
    required: true,
  },
  deptId: {
    type: String,
    default: "",
  },
});

const store = useMyXmateStore();
const reportType = computed(() => store.noticeBoardPublicParam.reportType);
const orgId = computed(() => getUserInfo().orgId);

onMounted(() => {
  nextTick(() => {
    getData();
  });
});

const userReportData: Ref<{ name; value, type }[]> = ref([]);
async function getUserReportAction() {
  console.log("getData: ", props.userId);
  const { datas } = await getUserReport(props.deptId, reportType.value as ReportDataType);
  const userReport = datas[0];
  if (!userReport) {
    return;
  }

  const {
    visitTargetAchievedCount,
    visitTargetNotAchievedCount,
    totalVisitCount,
  } = userReport;

  userReportData.value = [
    {
      name: "已达成",
      value: visitTargetAchievedCount,
      type: "completed"
    },
    {
      name: "未达成",
      value: visitTargetNotAchievedCount,
      type: "uncompleted"
    },
    {
      name: "结果未评估",
      value: totalVisitCount - visitTargetAchievedCount - visitTargetNotAchievedCount,
      type: "unknown"
    },
  ];
  console.log("userReport: ", userReportData.value);
}

const assessmentData = ref([]);
async function getUserAssessmentAction() {
  let params = {
    orgId: orgId.value,
    userId: props.userId,
    reportType: reportType.value,
    dataType: ReportDataType.COMPLETION,
  } as UserAssessmentParams;
  const { datas: userAssessment } = await getUserAssessment(params);
  assessmentData.value = userAssessment.map((v: any) => {
    return {
      name: v.assessmentName,
      value: Number(v.assessmentValue).toFixed(1),
    };
  });
  console.log("userAssessment: ", userAssessment);
}

function getData() {
  getUserReportAction();
  getUserAssessmentAction();
}
</script>

<style scoped lang="less"></style>
